<template>
	<view class="invitePoster">
		<u-navbar title="邀请好友" title-size="36" title-color="#333333" back-icon-size="40"></u-navbar>
	
		<view
			class="img-container"
			id="poster"
			style="background-image:url('https://www.hesongzhineng.com/img/javafile/20210821160136-3332e9cb-8590-444d-930c-00a0a332b9cb.png'); background-size: contain;"
		>
			<view class="img-footer">
				<view class="avatars">
					<u-avatar :src="userInfo.avatar" size="128" v-if="userInfo.avatar"></u-avatar>
					<u-avatar :src="qrcode" size="128" v-if="qrcode"></u-avatar>
				</view>
			</view>
		</view>
		<view class="home-button" @click="saveImg">
			<text style="color:#ffffff;font-weight:500">保存图片</text>
		</view>
		<xWxmlToCanvas ref="xWxmlToCanvas" :hide="false" :width="686" :height="916" :xStyle="style" :xWxml="wxml"></xWxmlToCanvas>
		<u-modal
		    v-model="showModal"
		    title="提示"
		    content="检测到您没有开启保存到相册的权限，是否去设置？"
		    :show-cancel-button="true"
		    @confirm="modalConfirm"
		></u-modal>
	</view>
</template>

<script>
// import { mapState } from 'vuex'
import storage from '@/common/js/storage';
import xWxmlToCanvas from '@/components/x-wxml-to-canvas/x-wxml-to-canvas';
import { mapState } from 'vuex';
const style = {
    container: {
        width: 686,
        height: 916,
        backgroundColor: '#fff',
        borderRadius: 24,
        padding: 20,
    },
    avatar: {
        width: 128,
        height: 128,
        borderRadius: 64,
        position: 'absolute',
        left: 32,
        bottom: 32,
    },
    qrcode: {
        width: 128,
        height: 128,
        borderRadius: 64,
        position: 'absolute',
        right: 32,
        bottom: 32,
    },
    bg: {
        width: 686,
        height: 916,
        position: 'absolute',
        right: 0,
        bottom: 0,
    },
};
export default {
	components: {
		xWxmlToCanvas
	},
	data() {
		return {
			qrcode: '',
			style: style,
			src: '',
			loading: false,
			showModal: false,
			avatar: null,
		}
	},
	computed: {
	    ...mapState(['userInfo']),
	    wxml() {
	        return `
	            <view class="container">
	                <image class="bg" src="https://www.hesongzhineng.com/img/javafile/20210821160136-3332e9cb-8590-444d-930c-00a0a332b9cb.png" mode="widthFix"></image>
			        <image class="avatar" src="${this.userInfo.avatar}" mode="widthFix"></image>
	                ${ this.qrcode ? `<image class="qrcode" src="${this.qrcode}" mode="widthFix"></image>` : ''}
		        </view>
	        `;
	    },
	},
	onLoad() {
		this.createQrCode();
		this.avatar = this.userInfo.avatar
	},
	methods: {
		createQrCode() {
		    uni.showLoading();
		    this.$u.get('/paopao/mini/user/createQRCode').then((data) => {
				console.log(data)
		        this.qrcode = data.id;
		        uni.hideLoading();
		    });
		},
		
		modalConfirm() {
		    uni.openSetting({
		        success: () => {}
		    });
		},
		
		async saveImg() {
		    if (this.loading) return;
		    this.loading = true;
		    uni.showLoading({
		        title: '保存中'
		    });
		
			setTimeout(() => {
				this.renderToCanvas();
			}, 2000);
		},
		
		renderToCanvas() {
			console.log(this.$refs.xWxmlToCanvas)
		    this.$refs.xWxmlToCanvas &&
		    this.$refs.xWxmlToCanvas.renderToCanvas()
		        .then(() => {
					console.log('ssjiu')
		            this.canvasToTempFilePath();
		        })
		        .catch(e => {
					console.log('error')
		            this.loading = false;
		        })
		},
		
		canvasToTempFilePath() {
		    this.loading = false;
		    this.$refs.xWxmlToCanvas && this.$refs.xWxmlToCanvas.canvasToTempFilePath().then((res) => {
		        console.log(res,'canvasToTempFilePath res')
		        this.src = res;
		
		        uni.getSetting({
		            success: (resp) => {
		                const writePhotosAlbum = resp.authSetting['scope.writePhotosAlbum'];
		                if (!writePhotosAlbum) {
		                    uni.authorize({
		                        scope: 'scope.writePhotosAlbum',
		                        success: () => {
		                            console.log('authorize success')
		                            this.saveImageToPhotosAlbum(res);
		                        },
		                        fail: (err) => {
		                            console.log('authorize err', err)
		                            this.showModal = true;
		                            uni.hideLoading();
		                        }
		                    })
		                } else {
		                    this.saveImageToPhotosAlbum(res);
		                }
		            },
		            fail: () => { uni.hideLoading(); }
		        })
		
		    }).catch(() => {
		        uni.hideLoading();
		    })
		},
		
		saveImageToPhotosAlbum(filePath) {
		    uni.saveImageToPhotosAlbum({
		        filePath,
		        success: () => {
		            uni.hideLoading();
		            this.$u.toast('已保存到相册，快去发朋友圈吧~');
		        },
		        fail: (err) => {
		            console.log(err,'err')
		            uni.hideLoading();
		            this.$u.toast('保存失败，未保存或相册权限不足~');
		        },
		    });
		}
	}
}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");
.invitePoster {
	background-color: #F7F7F7;
	height: calc(100vh);
}
.img-container {
	width: 686rpx;
	height: 916rpx;
	margin: 0 auto;
	margin-top: 32rpx;
	margin-bottom: 80rpx;
	position: relative;
	.img-footer {
		position: absolute;
		bottom: 32rpx;
		left: 0;
		width: 100%;
		padding: 0 32rpx;
		.text {
			text-align: center;
			font-size: 28rpx;
			color: #333333;
		}
		.avatars {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.avatar {
				height: 88rpx;
				width: 88rpx;
				background-color: #ffffff;
				border-radius: 50%;
			}
		}
	}
}
 /deep/canvas {
	position: absolute;
	top: 0;
	left: -1000px;
}
.home-button {
	height: 96rpx;
	width: 686rpx;
	color: #FFFFFF;
	line-height: 90rpx;
	background-color: #FF7B02;
	font-size: 36rpx;
	border-radius: 96rpx;
	margin: 0 auto;
	margin-bottom: 50rpx;
	text-align: center;
}
</style>
